<template>
  <div class="feedback">
    <a-card title="我的纠错列表" style="width: 100%">
      <!-- <div slot="extra">
        <a-input-search
          placeholder="请输入京东商品id进行查询"
          style="width: 250px"
          v-model="searchipt"
          @search="onSearch"
        />
      </div> -->
      <div class="goods_table">
        <a-table
          :columns="columns"
          :rowKey="goodsList => goodsList.id"
          :dataSource="goodsList"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="goods_img" slot-scope="row">
            <img :src="row.goods_img" style="width:120px;" />
          </div>
          <div slot="type" slot-scope="row">
            <div class="copy">
              {{
                row.type == 1
                  ? '价格不对/优惠券异常'
                  : row.type == 2
                    ? '佣金不对/计划取消'
                    : row.type == 3
                      ? '商品劣质/不发货/虚假'
                      : row.type == 4
                        ? '其他异常'
                        : '榜单纠错'
              }}
            </div>
          </div>
          <div slot="desc" slot-scope="row">
            <div class="copy">{{ row.desc }}</div>
          </div>
          <div slot="active" slot-scope="row">
            <span class="goodsurl" @click="gorouter(1, row)">查</span>
            <span class="goodsurl quan" @click="gorouter(2, row)">管</span>
          </div>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getMyGoodsErr } from '@/api/article'
//   import Moment from 'moment'

export default {
  name: 'Feedback',
  data () {
    return {
      searchipt: '',
      visible: false,
      confirmLoading: false,
      count: 0,
      columns: [
        {
          title: 'ID',
          width: 150,
          align: 'center',
          dataIndex: 'id',
          scopedSlots: {
            customRender: 'id'
          }
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'goods_short_name',
          scopedSlots: {
            customRender: 'goods_short_name'
          }
        },
        {
          title: '商品图片',
          align: 'center',
          //   dataIndex: 'goods_img',
          scopedSlots: {
            customRender: 'goods_img'
          }
        },
        {
          title: '纠错类型',
          align: 'center',
          width: 400,
          // dataIndex: 'type',
          scopedSlots: {
            customRender: 'type'
          }
        },
        {
          title: '问题描述',
          align: 'center',
          scopedSlots: {
            customRender: 'desc'
          }
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'create_at',
          scopedSlots: {
            customRender: 'create_at'
          }
        },
        {
          title: '操作',
          align: 'center',
          //   dataIndex: 'active',
          scopedSlots: {
            customRender: 'active'
          }
        }
      ],
      pagination: {
        pageSize: 15,
        page: 1
      },
      loading: false,
      goodsList: [
        // {
        //   create_at: '2020-08-03 16:01:17',
        //   desc: '测试测试测试测试',
        //   goods_img:
        //     'https://img14.360buyimg.com/n12/jfs/t1/120223/2/8183/167806/5f1f7257E9e8ddfb6/95f24c5cdcaa282b.jpg',
        //   goods_short_name: '梨子 香梨 新疆库尔勒香梨',
        //   id: 7,
        //   img:
        //     'img.letuilm.com/2020/08/bcd6e82020080316011237108.jpeg,img.letuilm.com/2020/08/1d9b042020080316011225046.jpeg',
        //   item_id: '71971129593',
        //   type: '1'
        // }
      ]
    }
  },

  computed: {},
  created () {
    this.getMyGoodsErr(1, 15)
  },
  mounted () {},
  methods: {
    gorouter (val, row) {
      console.log(val, row)
      if (val === 1) {
        const routes = this.$router.resolve({
          path: '/optimGoods/goodsDetails',
          query: { id: row.id }
        })
        window.open(routes.href, '_blank')
      }
      if (val === 2) {
        this.$router.push({
          path: '/admin/goods/order',
          query: { id: row.item_id }
        })
        // window.open(routes.href, '_blank')
      }
    },
    handleTableChange (pagination, filters) {
      // console.log(pagination)
      const pager = {
        ...this.pagination
      }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        ...filters
      })
    },
    fetch (params = {}) {
      // console.log('params:', params)
      this.loading = true
      this.getMyGoodsErr(params.page, 15)
    },
    onSearch (value) {
      // console.log(value)
      this.getMyGoodsErr(1, 15)
    },
    // 获取自己审核的商品列表
    getMyGoodsErr (page, pagesize) {
      this.loading = true

      getMyGoodsErr({
        page: page,
        pagesize: pagesize
      })
        .then(res => {
          if (res.code === 200) {
            console.log('纠错列表返回', res)
            this.count = res.data.count
            this.goodsList = res.data.data
            //   for (let i = 0; i < this.goodsList.length; i++) {
            //     this.goodsList[i].goods_start_time = Moment(parseInt(this.goodsList[i].goods_start_time + '000'))
            //       .format(
            //         'YYYY-MM-DD HH:mm:ss')
            //     this.goodsList[i].goods_end_time = Moment(parseInt(this.goodsList[i].goods_end_time + '000')).format(
            //       'YYYY-MM-DD HH:mm:ss')
            //   }
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          } else {
            this.$message.info(res.msg)
            this.loading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.display {
  display: flex;
}

.goods_table {
  .copy {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }

  .goodsurl {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    background-color: #fff;
    margin-left: 10px;
    color: #000;
    font-size: 18px;
    // font-weight: bolder;
    text-align: center;
    border-radius: 50%;
    // padding: 5px;
    color: gray;
    cursor: pointer;
    border: 1px solid gray;
  }

  .ant-table-row:hover {
    .goodsurl {
      background-color: green;
      color: #fff;
      // font-weight: bolder;
      border: none;
    }

    .quan {
      background-color: #1890ff;
    }
  }
}
</style>
